<template>
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center pagination">
      <li @click="prev" :class="['page-item',{'disabled':index === 1}]">
        <span class="page-link">上一页</span>
      </li>
      <li
        :class="['page-item', 'page-link',{'active':index === page}]"
        v-bind:key="page"
        v-for="page in totalPage"
        @click="go(page)"
      >{{page}}</li>
      <li @click="next" :class="['page-item', {'disabled':index === totalPage}]">
        <span class="page-link">下一页</span>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "MoPaging",
  props: {
    totalPage: Number,
    currentPage: Number
  },
  created() {
    this.index = 1;
  },
  data() {
    return {
      index: Number //当前页
    };
  },
  methods: {
    prev() {
      if (this.index > 1) {
        this.go(this.index - 1);
      }
    },
    go(page) {
      if (this.index != page) {
        this.index = page;
        //父组件通过change方法来接受当前的页码
        this.$emit("change", this.index);
        window.scrollTo(0, 0);
      }
    },
    next() {
      if (this.index < this.totalPage) {
        this.go(this.index + 1);
      }
    },
    setIndex(i) {
      this.index = i;
    }
  }
};
</script>

<style scoped>
.page-item {
  cursor: pointer;
}
.active {
  background: #007bff;
  color: #fff;
}
</style>